<template>
  <div class="problem-detail-view">

    <modules-title class="title-position" titleName="问题详情">

      <template slot="btn">
        <el-button plain @click="backClick" size="mini">返回</el-button>

        <el-button type="primary" v-if="datas.problem_status == 1 && checkCreator(datas.functionary_id) && !datas.problem_status != 6" @click="startProblem">
          开始处理
        </el-button>

        <el-button v-if="datas.problem_status == 1 && checkCreator(datas.creator_id) && !datas.problem_status != 6" @click="deleteClick">
          关闭问题
        </el-button>

        <el-button type="primary" v-if="(datas.problem_status == 2 || datas.problem_status == 5) && checkCreator(datas.functionary_id) && !datas.problem_status != 6" @click="reportClick">
          问题反馈
        </el-button>

        <el-button type="primary" v-if="datas.problem_status == 3 && checkCreator(datas.creator_id) && !datas.problem_status != 6" @click="acceptClick">
          问题确认
        </el-button>
      </template>

    </modules-title>

    <div class="pj-content">

      <item-title title="基本信息" />

      <el-form :inline="true" :model="datas" class="demo-form-inline" label-width="110px" size="medium" label-position="left">

        <el-row>
          <el-col :span="8">
            <el-form-item label="问题名称：">
              <div class="textarea">
                <span>{{datas.problem_name}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="问题编号：">
              <div class="textarea">
                <span>{{datas.problem_no}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="问题类型：">
              <div class="textarea">
                <span>{{datas.problem_type}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="优先级：">
              <div class="textarea">
                <span>{{datas.priority}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="负责人：">
              <div class="textarea">
                <span>{{datas.functionary}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="期望完成时间：">
              <div class="textarea">
                <span>{{dateFormat1('yyyy-mm-dd',datas.expect_end_time)}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属任务：">
              <div class="textarea">
                <span>{{datas.task_name}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属项目：">
              <div class="textarea">
                <span>{{datas.project_name}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建人 ：">
              <div class="textarea">
                <span>{{datas.creator_name}}</span>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建时间 ：">
              <div class="textarea">
                <span>{{datas.created_at}}</span>
              </div>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div v-if="datas.result_describe">

        <item-title title="反馈信息" />
        <el-row >

          <el-form :model="datas" class="demo-form-inline" label-width="110px" size="medium" label-position="left" >

            <el-col :span="24">
              <el-form-item label="反馈结果描述：">
                <div>{{datas.result_describe}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="反馈结果备注：">
                <div>{{datas.remark}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="反馈时间：">
                <div>{{datas.report_time}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="附件：">
                <file-preview :file-list="datas.accessory" />
              </el-form-item>
            </el-col>

          </el-form>

        </el-row>
      </div>

      <div v-if="datas.problem_result">
        <item-title title="确认信息" />
        <el-row >

          <el-form :model="datas" class="demo-form-inline" label-width="110px" size="medium" label-position="left" >

            <el-col :span="24">
              <el-form-item label="问题确认结果：">
                <div>{{datas.problem_result == 1 ? "已解决关闭问题" : "未解决继续问题"}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="确认意见：">
                <div>{{datas.acceptance_opinion}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="确认备注：">
                <div>{{datas.remark_result}}</div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="确认时间：">
                <div>{{datas.updated_at}}</div>
              </el-form-item>
            </el-col>

          </el-form>

        </el-row>
      </div>

    </div>

    <el-dialog
      width="700px"
      title="问题反馈"
      v-if="reportVisible"
      :visible.sync="reportVisible"
      append-to-body>

      <el-form :model="reportData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="反馈结果描述">
          <el-input
            v-model="reportData.result_describe"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="reportData.remark"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

        <el-form-item label="附件">
          <upload ref="upload" :edit-list="reportData.accessory" @uploadSuccess="uploadSuccess" @deleteSuccess="deleteSuccess" />

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">取 消</el-button>
        <el-button type="primary" @click="reportConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="500px"
      title="问题确认"
      v-if="acceptVisible"
      :visible.sync="acceptVisible"
      append-to-body>

      <el-form :model="acceptData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="确认结果">
          <el-select v-model="acceptData.problem_result">
            <el-option
              v-for="item in acceptResult"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="确认意见">
          <el-input
            v-model="acceptData.acceptance_opinion"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="acceptData.remark_result"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="acceptVisible = false">取 消</el-button>
        <el-button type="primary" @click="acceptConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "index",
        data:function () {
            return{
                datas:{},
                reportData:{},
                reportVisible:false,
                acceptData:{},
                acceptVisible:false,
                acceptResult:[
                    {
                        value:1,
                        label:'已解决关闭问题'
                    },
                    {
                        value:2,
                        label:'未解决继续问题'
                    }
                ],
            }
        },
        created(){
            if (this.$route.query.id){
                this.getData(this.$route.query.id)
            }
        },
        methods:{
            backClick:function(){
                this.$router.back()
            },
            getData:function (id) {
                this.$api.PROJECT_WORK_PROBLEM_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.datas = res.data;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            checkCreator:function(id){
                if (this.$store.getters.userInfo.user.id == id){
                    return true
                }
                return false
            },
            startProblem:function (id) {
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.datas.id,2,{}).then(res=>{
                    if (res.code == 200){
                        this.$route.params.refresh = true;
                        this.getData(this.datas.id);
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            deleteClick:function (id) {
                this.$api.PROJECT_WORK_PROBLEM_DELETE(this.datas.id).then(res=>{
                    if (res.code == 200){
                        this.$route.params.refresh = true;
                        this.$router.back()
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            reportClick:function (id) {
                this.reportData = {
                    result_describe:'',
                    remark:'',
                    accessory:[],
                }

                this.reportVisible = true;
            },
            deleteSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            uploadSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            reportConfirm:function () {

                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.datas.id,3,this.reportData).then(res=>{
                    this.reportVisible = false;
                    if (res.code == 200){
                        this.$route.params.refresh = true;
                        this.getData(this.datas.id);
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })

            },
            acceptClick:function(id){
                this.acceptData = {
                    problem_result:1,
                    acceptance_opinion:'',
                    remark_result:'',
                }

                this.acceptVisible = true;

            },
            acceptConfirm:function () {
                let status = 4;
                if (this.acceptData.problem_result == 2){
                    status = 5
                }
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.datas.id,status,this.acceptData).then(res=>{
                    this.acceptVisible = false;
                    if (res.code == 200){
                        this.$route.params.refresh = true;
                        this.getData(this.datas.id);
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/projectManagement/problem/detail.scss";
</style>
